<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px" v-show="showSearch">
      <!-- <el-form-item label="发震时间" prop="fzTime">
				<el-date-picker v-model="fzTime" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item> -->
			<el-form-item label="震级" prop="magnitude">
				<el-input v-model="queryParams.magnitude" placeholder="请输入震级" clearable @keyup.enter="handleQuery" />
			</el-form-item>
      <el-form-item label="省" prop="province">
        <el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable>
          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable>
          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区/县" prop="prefecture">
        <el-select v-model="queryParams.prefecture" placeholder="请选择区/县" @change="chooseCounty" clearable>
          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
        <!-- <el-button type="primary" @click="handleUpdate">更新数据</el-button> -->
      </el-form-item>
    </el-form>
    <!--<el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="addres">添加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="Delete" :disabled="multiple" @click="delData">删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getListData"></right-toolbar>
    </el-row>-->
    <el-table v-loading="loading" stripe  :data="getData" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="序号" width="80" type="index" align="center"/>
      <el-table-column label="发震时间" align="center" prop="earthquakeTime" />
      <el-table-column label="震级" align="center" prop="magnitude" />
      <el-table-column label="省" align="center" prop="province" />
      <el-table-column label="市" align="center" prop="city" />
      <el-table-column label="区/县" align="center" prop="prefecture" />
      <el-table-column label="操作" width="350" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="text"  @click="handleUpdate1(scope.row)">灾害情景分析</el-button>
          <el-button type="text"  @click="handleUpdate2(scope.row)">应急处置对策</el-button>
          <el-button type="text"  @click="handleReport(scope.row)">报告管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
      @pagination="getListData" />
    <el-dialog :title="title" v-model="open" width="850px" append-to-body @close="closeDialog">
      <!--<p class="dialogTitle">{{ title }}</p>-->
      <p></p>
      <el-row>
      <el-col class="tab-title">{{ physicalLocation }}</el-col>
	      <!-- <el-col :span="10" class="tab-title">
					{{form.province}}{{form.city}}{{form.area}}
				</el-col> -->
	    </el-row>
      <el-form ref="scenariosRef" :model="form" :rules="rules" label-width="120px">       
        <el-form-item label="建筑物破坏" prop="buildingDamage">
          <el-input v-model="form.buildingDamage" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="人员伤亡" prop="casualties">
          <el-input v-model="form.casualties" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="地质灾害" prop="geologicHazard">
          <el-input v-model="form.geologicHazard" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="次生灾害" prop="secondaryDisaster">
          <el-input v-model="form.secondaryDisaster" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="震后交通" prop="earthquakeTraffic">
          <el-input v-model="form.earthquakeTraffic" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="其他灾害情景">
          <el-input v-model="form.otherDisaster" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm1">保存</el-button>
          <el-button plain @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      :title="title"
      v-model="open2"
      width="850px"
      append-to-body
      @close="closeDialog2"
    >
    	<p></p>
    	<el-row>
        <el-col class="tab-title">{{ physicalLocation }}</el-col>
	      <!-- <el-col :span="10" class="tab-title">
					{{form2.province}}{{form2.city}}{{form2.area}}
				</el-col> -->
	    </el-row>
      <el-form ref="dispositionRef" :model="form2" :rules="rules2" label-width="170px">

        <el-form-item label="救援力量和物资投入" prop="rfasi">
          <el-input
            v-model="form2.rfasi"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="地震灾害危重区域识别" prop="edcai">
          <el-input
            v-model="form2.edcai"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="交通系统保障和抢修" prop="tssAer">
          <el-input
            v-model="form2.tssAer"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="通信系统保障和抢修" prop="assAer">
          <el-input
            v-model="form2.assAer"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="电力系统保障和抢修" prop="pssAer">
          <el-input
            v-model="form2.pssAer"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="重要基础设施隐患排查" prop="tmir">
          <el-input
            v-model="form2.tmir"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="气候特征应对" prop="climateCr">
          <el-input
            v-model="form2.climateCr"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="民族特征应对" prop="nationalCr">
          <el-input
            v-model="form2.nationalCr"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="谣言、舆情应对" prop="tdwrapo">
          <el-input
            v-model="form2.tdwrapo"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="其他地方特征应对">
          <el-input
            v-model="form2.olftdwCr"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm2">保存</el-button>
          <el-button plain @click="open2 = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="报告管理" v-model="openReport" append-to-body @close="cancelReport">
			<p></p>
      <table class="tableport">
				<tr>
					<td class="title"><span style="color: red;">*</span>报告模板</td>
				  <td class="content">
			     	<el-form :inline="true" :model="reportModel" class="demo-form-inline">
              <el-form-item label="" style="margin-bottom: 0;width: 100%;">
                  <el-select v-model="reportModel.simpleReport" placeholder="请选择" style="width: 400px;">
                      <el-option v-for="item in reportModel.simpleReportOption" :key="item.id"
                          :label="item.rtName" :value="item.attachId" />
                  </el-select>
              </el-form-item>
          	</el-form>
				  </td>
				</tr>
				<tr>
					
				  <td class="title">震后辅助决策报告</td>
				  <td class="content">
				      <template v-if="formData.reportName != ''">
				          <el-link @click="handleDownloadPort(formData.reportId, formData.reportName)"
				              :underline="false">
				              {{ formData.reportName }}
				          </el-link>
				      </template>
				      <div class="button" v-if="!isDownload">
				          <el-button type="primary" @click="openCreateDialog()"
				              v-if="!formData.reportName">生成报告</el-button>
				          <el-button type="primary" @click="openCreateDialog()" v-else>重新生成</el-button>
				      </div>
				  </td>
				</tr>
      </table>
      <p></p>
      <template #footer>
          <div class="dialog-footer">
              <el-button plain @click="cancelReport">关闭</el-button>
          </div>
      </template>
    </el-dialog>
    <!-- 上传进度展示 -->
    <el-dialog v-model="openCreate" title="正在生成报告" width="400px" :close-on-click-modal="false" append-to-body
        :show-close="false">
        <p></p>
        <div class="demo-progress">
            <el-progress :percentage="percentages" />
        </div>
        <div class="footer">
            <el-button plain @click="cancelUpload">取消生成</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script setup>
 
import { listAuxiliaryDecision, updateData, getScenarios, getEmergency, updateList1, updateList2, getReportTemplateByType, reportCreat, getReport } from '@/api/assistPolicy/zhfzjcgl'
import { getProvince, getChildArea } from "@/api/system/division";

const { proxy } = getCurrentInstance();
const showSearch = ref(true);
const open = ref(false); //dialog操作
const open2 = ref(false);
const openReport = ref(false);
const openCreate = ref(false);
const createReport = ref(false)
const openView = ref(false);
const getData = ref([]); //获取列表数组
const title = ref(""); //标题
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const loading = ref(false);
const isEdit = ref(false);
const provinceFormData = ref([]);//表单省 
const cityFormData = ref([]);//表单市
const areaFormData = ref([]);//表单区、县
const fzTime = ref([]);
const isDownload = ref(false);
const id = ref();
const percentages = ref();
const reportModel = reactive({
    simpleReport: '',
    simpleReportOption: [],
});
const physicalLocation = ref('');
const data = reactive({
  form: {},
  form2: {},
  formData: {},
  queryParams: {
    page: 1,
    rows: 10,
    startTime: "",
    endTime: "",
    province: "",
    city: "",
    prefecture: "",
  },
  taskDetailDialog: {
    arrsmId: "",
    arrsnProvince: "",
    arrsmCity: "",
    arrsmPrefecture: "",
    buildingDamage: "",
    casualties: "",
    geologicHazard: "",
    secondaryDisaster: "",
    earthquakeTraffic: "",
  },
  rules: {
    provinceId: [{ required: true, message: "省不能为空", trigger: "change" }],
    cityId: [{ required: true, message: "市不能为空", trigger: "change" }],
    areaId: [
      { required: true, message: "区/县不能为空", trigger: "change" },
    ],
    buildingDamage: [
      { required: true, message: "建筑物破坏不能为空", trigger: "blur" },
    ],
    casualties: [
      { required: true, message: "人员伤亡不能为空", trigger: "blur" },
    ],
    geologicHazard: [
      { required: true, message: "地质灾害不能为空", trigger: "blur" },
    ],
    secondaryDisaster: [
      { required: true, message: "次生灾害不能为空", trigger: "blur" },
    ],
    earthquakeTraffic: [
      { required: true, message: "震后交通不能为空", trigger: "blur" },
    ],
  },
  rules2: {

    rfasi: [
      {
        required: true,
        message: "救援力量和物资投入不能为空",
        trigger: "blur",
      },
    ],
    edcai: [
      {
        required: true,
        message: "地震灾害危重区域识别不能为空",
        trigger: "blur",
      },
    ],
    tssAer: [
      {
        required: true,
        message: "交通系统保障和抢修不能为空",
        trigger: "blur",
      },
    ],
    assAer: [
      {
        required: true,
        message: "通信系统保障和抢修不能为空",
        trigger: "blur",
      },
    ],
    pssAer: [
      {
        required: true,
        message: "电力系统保障和抢修不能为空",
        trigger: "blur",
      },
    ],
    tmir: [
      {
        required: true,
        message: "重要基础设施隐患排查不能为空",
        trigger: "blur",
      },
    ],
    climateCr: [
      { required: true, message: "气候特征应对不能为空", trigger: "blur" },
    ],
    nationalCr: [
      { required: true, message: "民族特征应对不能为空", trigger: "blur" },
    ],
    tdwrapo: [
      { required: true, message: "谣言、舆情应对不能为空", trigger: "blur" },
    ],
    olftdwCr: [
      { required: true, message: "其他地方特征应对不能为空", trigger: "blur" },
    ],
  },
});
const { queryParams, form, form2, formData, rules, rules2, taskDetailDialog } = toRefs(data);

function chooseProvince(value) {
  queryParams.value.city = null;
  queryParams.value.prefecture = null;
  queryParams.value.province = value.name;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value.id).then(response => {
      cityData.value = response.data;
  });
}

function chooseCity(value) {
  queryParams.value.city = value.name;
  queryParams.value.prefecture = null;
  areaData.value = [];
  getChildArea(value.id).then((response) => {
      areaData.value = response.data;
  });
}
function chooseCounty(value) {
  queryParams.value.prefecture = value.name;
}
function chooseFormProvince(value){
	form.value.cityId = null;
	form.value.areaId = null;
	cityFormData.value = [];
	areaFormData.value = [];
	getChildArea(value).then(response => {
    cityFormData.value = response.data;
	});	
}
function chooseFormCity(value){
	form.value.areaId = null;
	areaFormData.value = [];
	getChildArea(value).then(response => {
	    areaFormData.value = response.data;
	});
}

/** 获取省列表 */
function getProvinceData() {
  getProvince().then((response) => {
    provinceData.value = response.data;
    provinceFormData.value = response.data;
  });
}

function addProvinceFormData(provinceId) {
	getProvince().then(response => {
	    provinceFormData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
    cityFormData.value = response.data;
	});	
}

function editProvinceFormData(provinceId,cityId) {
	getProvince().then(response => {
	    provinceFormData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
    cityFormData.value = response.data;
	});
	getChildArea(cityId).then(response => {
	    areaFormData.value = response.data;
	});
}

// 获取列表
function getListData() {
  loading.value = true;
  listAuxiliaryDecision(queryParams.value).then((res) => {
    getData.value = res.data.rows;
    total.value = res.data.total;
    loading.value = false;
  });
}

function handleUpdate(){
	updateData().then((res) => {
    proxy.$modal.msgSuccess("更新成功");
  });
}

// 查询
function handleQuery() {
  queryParams.page = 1;
  queryParams.value.startTime = fzTime.value? fzTime.value[0] : "";
	queryParams.value.endTime = fzTime.value? fzTime.value[1] : "";
  getListData();
}
// 重置
function resetQuery() {
	fzTime.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 添加按钮
function addres() {
  open.value = true;
  title.value = "添加灾害情景";
  getUserProvinceId().then((res) => {
  	form.value.provinceId = res.data;
    addProvinceFormData(res.data);
  });
}
// 删除
function delData() {
  proxy.$modal
    .confirm("是否确认删除吗？")
    .then(function () {
      return delList(ids.value);
    })
    .then(() => {
      getListData();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => { });
}

// 修改操作
let idUpdata = ref('')
function handleUpdate1(row) {
  idUpdata.value = row.id
  title.value = "灾害情景分析";
  physicalLocation.value = row.province+row.city+row.prefecture;
  getScenarios(row.id).then(response => {
    form.value = response.data;
    open.value = true;
    //editProvinceFormData(response.data.provinceId,response.data.cityId)
  });
}

function handleUpdate2(row) {
  idUpdata.value = row.id
  title.value = "应急处置对策";
  physicalLocation.value = row.province+row.city+row.prefecture;
  getEmergency(row.id).then(response => {
    form2.value = response.data;
    open2.value = true;
    //editProvinceFormData(response.data.provinceId,response.data.cityId)
  });
}

//报告管理
function handleReport(row){
	openReport.value = true;
	id.value = row.id;
	getReport(row.id).then(response => {
    formData.value = response.data;
		reportModel.simpleReport = response.data.attachId;
  });
	getReportTemplate();
}
//
function getReportTemplate(){
	getReportTemplateByType("辅助决策报告").then(res => {
//    if (res.data.simplifiedReportTemplate) {
//        let selectInfo = reportModel.simpleReportOption.filter(item => item.rtName == res.data.simplifiedReportTemplate)
//        selectInfo.length > 0 && (reportModel.simpleReport = selectInfo[0].attachId)
//    }
//    if (res.data.deReportTemplate) {
//        let selectInfo = reportModel.minuteReportOption.filter(item => item.rtName == res.data.deReportTemplate)
//        selectInfo.length > 0 && (reportModel.minuteReport = selectInfo[0].attachId)
//    }
		reportModel.simpleReportOption = res.data;
  })
}
// 生成报告
//function openCreateDialog() {
//  if (!reportModel.simpleReport) {
//      proxy.$modal.msgWarning('请选择报告模板！')
//      return
//  }
//  createReportType.value = type
//  createReport.value = true
//  getReport(form.value.taskId).then(res => {
//      if (res.data.simplifiedReportTemplate) {
//          let selectInfo = reportModel.simpleReportOption.filter(item => item.rtName == res.data.simplifiedReportTemplate)
//          selectInfo.length > 0 && (reportModel.simpleReport = selectInfo[0].attachId)
//      }
//      if (res.data.deReportTemplate) {
//          let selectInfo = reportModel.minuteReportOption.filter(item => item.rtName == res.data.deReportTemplate)
//          selectInfo.length > 0 && (reportModel.minuteReport = selectInfo[0].attachId)
//      }
//      form.value.administrativeLevel = res.data.administrativeLevel
//      form.value.dataSource = res.data.dataSource
//  })
//}
let cancelFunc = {}
function openCreateDialog() {
    if(typeof cancelFunc.c === "function") {
        cancelFunc.c('取消成功')
    }
    let query = {
        id: id.value,        
    }
    if (!reportModel.simpleReport) {
        proxy.$modal.msgWarning('请选择简本报告模板！')
        return
    }
    query.attachId = reportModel.simpleReport
    //query.simplifiedReportTemplate = reportModel.simpleReportOption.filter(item => item.attachId == reportModel.simpleReport)[0].rtName
    percentages.value = 0;
    openCreate.value = true;

    let startTime = setInterval(() => {
        if (percentages.value < 50) {
            percentages.value += 5;
        }
        if (percentages.value == 50) {
            clearInterval(startTime);
            let conductTime = setInterval(() => {
                if (percentages.value == 95) {
                    clearInterval(conductTime);
                }
                if (percentages.value < 96) {
                    percentages.value += 2;
                }
            }, 100)
        }
    }, 100)

    reportCreat(query, cancelFunc).then(res => {
        percentages.value = 100;
        createReport.value = false
        openCreate.value = false
        const {code,data,message} = res
        if(code == 200 && data!=null){
            formData.value = res.data
            console.log(formData.value)
            clearInterval(startTime)
            proxy.$modal.msgSuccess('报告生成成功！')
        }else{
            proxy.$modal.msgError(message)
        }
        // clearInterval(conductTime);
    }).catch(err => {
    	 console.log(err)
        openCreate.value = false
        if(err.message !== '取消成功') {
            cancelFunc.c = null
        }
    })

}

// 取消生成
function cancelUpload() {
    if(typeof cancelFunc.c === "function") {
        cancelFunc.c('取消成功')
    }
    openCreate.value = false;
    // if (activeName.value == 'ypg') {
    //     const query = {
    //         taskId: form.value.taskId,
    //         type: '1',
    //         level: '1'
    //     }
    //     percentages.value = 0;
    //     canceCreat(query).then(res => {
    //         percentages.value = 0;
    //         proxy.$modal.msgSuccess("取消成功");
    //     })
    // } else if (activeName.value == 'xcdc') {
    //     const query = {
    //         taskName: form.value.taskName,
    //         taskCode: form.value.taskCode,
    //         attachId: reportModel.xcdcReport,
    //         modelName: reportModel.xcdcReportOption.filter(item => item.attachId == reportModel.xcdcReport)[0].rtName
    //     }
    //     percentages.value = 0;
    //     cancelSamplingCreat(query).then(res => {
    //         percentages.value = 0;
    //         proxy.$modal.msgSuccess("取消成功");
    //     })
    // }
}
// 下载文件
function handleDownloadPort(reportId, name) {
    proxy.download("/auxiliaryDecision/downloadReport", {
        reportId: reportId
    }, name);
};
function cancelCreatReport(){
    createReport.value = false
    form.value.dataSource = 2
    form.value.administrativeLevel = '0'
    reportModel.simpleReport = ''
    reportModel.minuteReport = ''
}
//查看操作
function handleView(row) {
  title.value = "查看灾害情景";
  getScenarios(row.id).then(response => {
    form.value = response.data;
    openView.value = true;
    editProvinceFormData(response.data.provinceId,response.data.cityId)
  });
}

//保存
function submitForm1() {
  proxy.$refs["scenariosRef"].validate((valid) => {
    if (!valid) {
      return;
    }

    updateList1({...form.value,id:idUpdata.value}).then((res) => {
      if(res.message == "该省市区县已存在,不能修改!"){		    		
				proxy.$modal.msgWarning(res.data);
			}else{
				proxy.$modal.msgSuccess(res.data);
				open.value = false;
		  	getListData();
			}
    });

  });
}
//保存
function submitForm2() {
  proxy.$refs["dispositionRef"].validate((valid) => {
    if (!valid) {
      return;
    }

    updateList2({...form2.value,id:idUpdata.value}).then((res) => {
      if(res.message == "该省市区县已存在,不能修改!"){		    		
				proxy.$modal.msgWarning(res.data);
			}else{
				proxy.$modal.msgSuccess(res.data);
				open2.value = false;
		  	getListData();
			}
    });

  });
}
//复选框操作
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 表单重置
function reset() {
  form.value = {
    arrsmId: "",
    provinceId: null,
    cityId: null,
    areaId: null,
    buildingDamage: null,
    casualties: null,
    geologicHazard: null,
    secondaryDisaster: null,
    earthquakeTraffic: null,
    otherDisaster: null,
  };
  proxy.resetForm("scenariosRef");
}
function reset2() {
  form2.value = {
    ercmId: "",
    provinceId: null,
    cityId: null,
    prefectureId: null,
    rfasi: null,
    edcai: null,
    tssAer: null,
    assAer: null,
    pssAer: null,
    tmir: null,
    climateCr: null,
    nationalCr: null,
    tdwrapo: null,
    olftdwCr: null,
  };
  proxy.resetForm("dispositionRef");
}
//关闭dialog
function closeDialog() {
  open.value = false;
  reset();
}
function closeDialog2() {
  open2.value = false;
  reset2();
}
/** 取消按钮 */
function cancelReport() {
  openReport.value = false;
  reportModel.simpleReport ='';
  reportModel.simpleReportOption = [];

}
getProvinceData();
getListData();
</script>
<style scoped lang="scss">
.tab-title {
	font-size: 16px;
	font-weight: bold;
	border-left: 4px solid var(--el-color-primary);
	font-family: PingFangSC-Medium;
	padding-left: 10px;
	margin-bottom: 20px;
}
.tableport {
  border-collapse: collapse;
  width: 100%;

  tr {
      height: 54px;

      td {
          border: 1px solid #000;

          &.title {
              text-align: center;
              width: 250px;
              font-weight: 700;
              color: 16px;
          }

          &.content {
              padding: 0px 20px;
              line-height: 54px;

              .button {
                  float: right;
                  height: 54px;
                  vertical-align: middle;
              }
          }
      }
  }

}
</style>
